<!doctype html>




<html class="theme-next pisces" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>



<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />












  
  
    
  
  <link href="//cdn.staticfile.org/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet" type="text/css" />




  
  
  
  

  
    
    
  

  
    
      
    

    
  

  

  
    
      
    

    
  

  
    
      
    

    
  

  
    
    
    <link href="//fonts.lug.ustc.edu.cn/css?family=Monda:300,300italic,400,400italic,700,700italic|Roboto Slab:300,300italic,400,400italic,700,700italic|Lobster Two:300,300italic,400,400italic,700,700italic|PT Mono:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






  

<link href="//cdn.staticfile.org/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.1.0" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="Web,JavaScript," />








  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.1.0" />






<meta name="description" content="ECMAScript 的标识符
区分大小写
采用驼峰大小写格式。为了与 ECMAScript 内置的函数和对象命名格式保持一致。  如： doSomethingImportant

注释
单行： //这里是注释
多行：  123/*这里是注释*/


ECMAScript 的严格模式 (strict mode)
严格模式的启用：顶部添加如下代码：”use strict”;看起来像是字符串，而且也没">
<meta property="og:type" content="article">
<meta property="og:title" content="《 JavaScript 高级程序设计》备忘-第三章-1">
<meta property="og:url" content="http://codingme.xyz/2016/09/11/javascript-note-03-1/index.html">
<meta property="og:site_name" content="CodingMe">
<meta property="og:description" content="ECMAScript 的标识符
区分大小写
采用驼峰大小写格式。为了与 ECMAScript 内置的函数和对象命名格式保持一致。  如： doSomethingImportant

注释
单行： //这里是注释
多行：  123/*这里是注释*/


ECMAScript 的严格模式 (strict mode)
严格模式的启用：顶部添加如下代码：”use strict”;看起来像是字符串，而且也没">
<meta property="og:updated_time" content="2016-10-15T09:45:06.344Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="《 JavaScript 高级程序设计》备忘-第三章-1">
<meta name="twitter:description" content="ECMAScript 的标识符
区分大小写
采用驼峰大小写格式。为了与 ECMAScript 内置的函数和对象命名格式保持一致。  如： doSomethingImportant

注释
单行： //这里是注释
多行：  123/*这里是注释*/


ECMAScript 的严格模式 (strict mode)
严格模式的启用：顶部添加如下代码：”use strict”;看起来像是字符串，而且也没">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Pisces',
    sidebar: {"position":"right","display":"post"},
    fancybox: true,
    motion: false,
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://codingme.xyz/2016/09/11/javascript-note-03-1/"/>





  <title> 《 JavaScript 高级程序设计》备忘-第三章-1 | CodingMe </title>
</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  










  
  
    
  

  <div class="container one-collumn sidebar-position-right page-post-detail ">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-meta ">
  

  <div class="custom-logo-site-title">
    <a href="/"  class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <span class="site-title">CodingMe</span>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>
  <p class="site-subtitle"></p>
</div>

<div class="site-nav-toggle">
  <button>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
  </button>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br />
            
            关于
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br />
            
            分类
          </a>
        </li>
      

      
        <li class="menu-item menu-item-search">
          
            <a href="javascript:;" class="popup-trigger">
          
            
              <i class="menu-item-icon fa fa-search fa-fw"></i> <br />
            
            搜索
          </a>
        </li>
      
    </ul>
  

  
    <div class="site-search">
      
  <div class="popup">
 <span class="search-icon fa fa-search"></span>
 <input type="text" id="local-search-input">
 <div id="local-search-result"></div>
 <span class="popup-btn-close">close</span>
</div>


    </div>
  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
  <link itemprop="mainEntityOfPage" href="http://codingme.xyz/2016/09/11/javascript-note-03-1/">

  <span style="display:none" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <meta itemprop="name" content="Huang SJ">
    <meta itemprop="description" content="">
    <meta itemprop="image" content="/uploads/avatar.jpg">
  </span>

  <span style="display:none" itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
    <meta itemprop="name" content="CodingMe">
    <span style="display:none" itemprop="logo" itemscope itemtype="http://schema.org/ImageObject">
      <img style="display:none;" itemprop="url image" alt="CodingMe" src="">
    </span>
  </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                《 JavaScript 高级程序设计》备忘-第三章-1
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            

            

            
          </span>

          

          
            
          

          

          
          

          

          

        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        <h1 id="ECMAScript-的标识符"><a href="#ECMAScript-的标识符" class="headerlink" title="ECMAScript 的标识符"></a>ECMAScript 的标识符</h1><ul>
<li>区分大小写</li>
<li>采用驼峰大小写格式。为了与 ECMAScript 内置的函数和对象命名格式保持一致。<br>  如： doSomethingImportant</li>
</ul>
<h1 id="注释"><a href="#注释" class="headerlink" title="注释"></a>注释</h1><ul>
<li>单行： <code>//这里是注释</code></li>
<li>多行：  <figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/*</span></div><div class="line">这里是注释</div><div class="line">*/</div></pre></td></tr></table></figure>
</li>
</ul>
<h1 id="ECMAScript-的严格模式-strict-mode"><a href="#ECMAScript-的严格模式-strict-mode" class="headerlink" title="ECMAScript 的严格模式 (strict mode)"></a>ECMAScript 的严格模式 (strict mode)</h1><ul>
<li>严格模式的启用：<br>顶部添加如下代码：”use strict”;<br>看起来像是字符串，而且也没有赋值给任何变量，但其实它是一个编译指示(pragma)，用于告诉支持的 JavaScript 引擎切换到严格模式。这是为不破坏 ECMAScript 3 语法而特意选定的语法。</li>
<li><p>也可以指定函数在严格模式下执行：</p>
  <figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">doSomething</span>(<span class="params"></span>)</span>&#123;</div><div class="line"><span class="meta">    "use strict"</span>;</div><div class="line">    <span class="comment">//函数体</span></div><div class="line">&#125;</div></pre></td></tr></table></figure>
</li>
<li><p>严格模式下， JavaScript 的执行结果会有很大不同。<br>  支持严格模式的浏览器包括 IE10+ 、 Firefox 4+ 、 Safari 5.1+ 、 Opera 12+和 Chrome 。</p>
</li>
</ul>
<a id="more"></a>
<h1 id="ECMAScript-的语句"><a href="#ECMAScript-的语句" class="headerlink" title="ECMAScript 的语句"></a>ECMAScript 的语句</h1><ul>
<li>任何时候都不要省略语句结尾的分号。加上分号也会在某些情况下增进代码的性能，因为这样解析器就不必再花时间推测应该在哪里插入分号了。</li>
<li>最佳实践是始终在控制语句中使用代码块。</li>
</ul>
<h1 id="ECMAScript-的关键字和保留字"><a href="#ECMAScript-的关键字和保留字" class="headerlink" title="ECMAScript 的关键字和保留字"></a>ECMAScript 的关键字和保留字</h1><h2 id="关键字"><a href="#关键字" class="headerlink" title="关键字"></a>关键字</h2><pre><code>break       do      instanceof  typeof
case        else    new         var
catch       finally return      void
continue    for     switch      while
debugger*   function this       with
default     if      throw
delete      in      try
</code></pre><h2 id="保留字"><a href="#保留字" class="headerlink" title="保留字"></a>保留字</h2><p>第三版的全部保留字：</p>
<pre><code>abstract    enum        int         short
boolean     export      interface   static
byte        extends     long        super
char        final       native      synchronized
class       float       package     throws
const       goto        private     transient
debugger    implements  protected   volatile
double      import      public
</code></pre><p>第 5 版在非严格模式下：</p>
<pre><code>class   enum      extends   super
const   export    import
</code></pre><p>在严格模式下还有：</p>
<pre><code>implements  package     public
interface   private     static
let         protected   yield
</code></pre><p>为了最大程度地保证兼容性，建议读者将第 3 版定义的保留字外加 let 和 yield 作为编程时的参考。<br>一般来说，最好都不要使用关键字和保留字作为标识符和属性名，以便与将来的 ECMAScript 版本兼容。<br>举例：<br>IE7 问世时 ECMAScript5 还没出来。 IE8 支持一点，直到 IE9 支持更多 、 IE10完美支持。<br>所以为了兼容 IE ，要这么参考。</p>
<h1 id="ECMAScript-的变量"><a href="#ECMAScript-的变量" class="headerlink" title="ECMAScript 的变量"></a>ECMAScript 的变量</h1><ol>
<li>不建议修改变量所保存值的<strong>类型</strong>。</li>
<li>用 var 操作符定义的变量将成为定义该变量的作用域中的<strong>局部变量</strong>。(即作用域方面的问题)</li>
<li>虽然省略 var 操作符可以定义全局变量，但这也不是我们推荐的做法。<br> 因为在局部作用域中定义的全局变量很难维护，<br> 而且如果有意地忽略了 var 操作符，也会由于相应变量不会马上就有定义而导致不必要的混乱。<br> 给<strong>未经声明</strong>的变量赋值在严格模式下会导致抛出 ReferenceError 错误。</li>
<li><p>可以使用一条语句定义多个变量，只要把每个变量用逗号分隔开就行。虽然代码里的换行和变量缩进不是必需的，但这样做可以提高<strong>可读性</strong>。</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> message = <span class="string">"hi"</span>,</div><div class="line">    found = <span class="literal">false</span>,</div><div class="line">    age = <span class="number">29</span>;</div></pre></td></tr></table></figure>
</li>
<li><p>在严格模式下，不能定义名为 eval 或 arguments 的变量，否则会导致语法错误。</p>
</li>
</ol>
<h1 id="ECMAScript-的数据类型"><a href="#ECMAScript-的数据类型" class="headerlink" title="ECMAScript 的数据类型"></a>ECMAScript 的数据类型</h1><ol>
<li>五种简单数据类型：<ol>
<li>Undefined</li>
<li>Null</li>
<li>Boolean</li>
<li>Number</li>
<li>String</li>
</ol>
</li>
<li>一种复杂数据类型—— Object ， Object 本质上是由一组无序的名值对组成的。</li>
</ol>
<h2 id="typeof-操作符"><a href="#typeof-操作符" class="headerlink" title="typeof 操作符"></a>typeof 操作符</h2><ol>
<li>可能返回的字符串：<br> “undefined” ——如果这个值未定义；<br> “boolean” ——如果这个值是布尔值；<br> “string” ——如果这个值是字符串；<br> “number” ——如果这个值是数值；<br> “object” ——如果这个值是对象或 null ；<br> “function” ——如果这个值是函数。</li>
<li><code>typeof null</code>会返回 “object”，因为特殊值 null 被认为是一个空的对象引用。</li>
<li>从技术角度讲，函数在 ECMAScript 中是对象，不是一种数据类型。然而，函数也确实有一些特殊的属性，因此通过 typeof 操作符来区分函数和其他对象是有必要的。</li>
</ol>
<h2 id="Undefined-类型"><a href="#Undefined-类型" class="headerlink" title="Undefined 类型"></a>Undefined 类型</h2><ol>
<li>显式的 undefined 值 由 ECMAScript 第三版引入，引入这个值的目的是用于比较，为了正式区分空对象指针(引用,null)与未经初始化的变量。<br> undefined 的一个示例：<br> <code>var message;</code> 等同于 <code>var message = undefined;</code></li>
<li><p>对于尚未声明的变量，只能执行一项操作，即使用 typeof 操作符检测其数据类型，然而:</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> message; <span class="comment">// 这个变量声明之后默认取得了 undefined 值</span></div><div class="line"><span class="comment">// 下面这个变量并没有声明</span></div><div class="line"><span class="comment">// var age</span></div><div class="line">alert(<span class="keyword">typeof</span> message); <span class="comment">// "undefined"</span></div><div class="line">alert(<span class="keyword">typeof</span> age); <span class="comment">// "undefined"</span></div></pre></td></tr></table></figure>
<p> 这个结果有其逻辑上的合理性。因为虽然这两种变量从技术角度看有本质区别，但实际上无论对哪种变量也不可能执行真正的操作。</p>
</li>
<li>显式地初始化变量依然是明智的选择。于是 typeof 操作符返回 “undefined”时我们就能确定被检测的变量还没有被声明。(如果声明肯定初始化了不会是 undefined )</li>
</ol>
<h2 id="Null-类型"><a href="#Null-类型" class="headerlink" title="Null 类型"></a>Null 类型</h2><ol>
<li><p>Null 类型是第二个只有一个值的数据类型，这个特殊的值是 null 。从逻辑角度来看， null 值表示一个<strong>空对象指针</strong>，而这也正是使用 typeof 操作符检测 null 值时会返回 “object” 的原因。</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> car = <span class="literal">null</span>;</div><div class="line">alert(<span class="keyword">typeof</span> car); <span class="comment">// "object"</span></div></pre></td></tr></table></figure>
</li>
<li><p>如果定义的变量准备在将来用于保存对象，那么最好将该变量初始化为 null 而不是其他值。这样就可以直接检查知道变量是否已经保存了一个对象的引用。</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">if</span> (car != <span class="literal">null</span>)&#123;</div><div class="line">    <span class="comment">// 对 car 对象执行某些操作</span></div><div class="line">&#125;</div></pre></td></tr></table></figure>
</li>
<li><p>实际上， undefined 值是派生自 null 值的,因此相等性测试【相等操作符( == )】：</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">alert(<span class="literal">null</span> == <span class="literal">undefined</span>); <span class="comment">//true</span></div></pre></td></tr></table></figure>
<p> 两者用途完全不同。无论在什么情况下都没有必要把一个变量的值显式地设置为 undefined ，对 null 则不同。只要意在保存对象的变量还没有真正保存对象，就应该明确地让该变量保存 null 值。这样做不仅可以体现 null 作为空对象指针的惯例，而且也有助于进一步区分 null 和 undefined 。</p>
</li>
</ol>
<h2 id="Boolean-类型"><a href="#Boolean-类型" class="headerlink" title="Boolean 类型"></a>Boolean 类型</h2><ol>
<li><p>虽然 Boolean 类型的字面值只有两个，但 ECMAScript 中所有类型的值都有与这两个 Boolean 值等价的值。要将一个值转换为其对应的 Boolean 值，可以调用转型函数 <code>Boolean()</code>。</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> message = <span class="string">"Hello world!"</span>;</div><div class="line"><span class="keyword">var</span> messageAsBoolean = <span class="built_in">Boolean</span>(message);</div></pre></td></tr></table></figure>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/*</span></div><div class="line">数据类型     转换为 true 的值                 转换为 false 的值</div><div class="line">Boolean     true                          false</div><div class="line">String      任何非空字符串                  "" (空字符串)</div><div class="line">Number      任何非零数字值(包括无穷大)     0和 NaN</div><div class="line">Object      任何对象                       null</div><div class="line">Undefined   n/a                           undefined</div><div class="line">*/</div></pre></td></tr></table></figure>
<p> 这些转换规则对理解流控制语句(如 if 语句)自动执行相应的 Boolean 转换非常重要</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> message = <span class="string">"Hello world!"</span>;</div><div class="line"><span class="keyword">if</span> (message)&#123;</div><div class="line">    alert(<span class="string">"Value is true"</span>);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="Number-类型"><a href="#Number-类型" class="headerlink" title="Number 类型"></a>Number 类型</h2><p>ECMScript 没有为整数和浮点数值分别定义不同的数据类型， Number 类型可用于表示所有数值。</p>
<ol>
<li>十进制整数:<br> <code>var intNum = 55; // 整数</code></li>
<li>八进制：<br> <code>var octalNum1 = 070; // 八进制的 56</code></li>
<li>十六进制:<br> <code>var hexNum1 = 0xA; // 十六进制的 10</code></li>
<li>浮点数值：<br> <code>var floatNum1 = 1.1;</code><br> 虽然小数点前面可以没有整数，但我们不推荐这种写法。<br> 保存浮点数值需要的内存空间是保存整数值的两倍，所以 ECMAScript 会不失时机地将浮点数值转换为整数值。<br> 如果小数点后面没有跟任何数字，或者本身表示的就是一个整数，那么这个数值就可以作为整数值来保存。<br> 对于那些极大或极小的数值，可以用 e 表示法(即科学计数法)表示的浮点数值表示。<br> <code>var floatNum = 3.125e7; // 等于 31250000</code><br> 在默认情况下， ECMASctipt 会将那些小数点后面带有 6 个零以上的浮点数值转换为以 e 表示法表示的数值。</li>
<li>数值范围<ul>
<li><code>Number.MIN_VALUE</code> ：5e-324</li>
<li><code>Number.MAX_VALUE</code> ：1.7976931348623157e+308</li>
<li>一旦超出就会被转换成特殊的 Infinity 值。</li>
<li>如果某次计算返回了正或负的 Infinity 值，那么该值将无法继续参与下一次的计算，因为 Infinity 不是能够参与计算的数值。</li>
<li>判断是不是有穷的，可以用 <code>isFinite()</code> 函数。</li>
<li>访问 <code>Number.NEGATIVE_INFINITY</code> 和 <code>Number.POSITIVE_INFINITY</code> 也可以得到负和正 Infinity 的值。可以想见，这两个属性中分别保存着 -Infinity 和 Infinity 。</li>
</ul>
</li>
<li>NaN<ul>
<li>用于表示一个本来要返回数值的操作数未返回数值的情况(这样就不会抛出错误了)。</li>
<li>在 ECMAScript 中，任何数值除以 0会返回 NaN ，因此不会影响其他代码的执行。</li>
<li>特点1：任何涉及 NaN 的操作(例如 NaN /10)都会返回 NaN ，这个特点在多步计算中有可能导致问题。</li>
<li>特点2： NaN 与任何值都不相等，包括 NaN 本身。针对 NaN 的这两个特点， ECMAScript 定义了 <code>isNaN()</code> 函数。</li>
<li><code>isNaN()</code> 也适用于对象。会首先调用对象的 <code>valueOf()</code> 方法，然后确定该方法返回的值是否可以转换为数值。如果不能，则基于这个返回值再调用 <code>toString()</code> 方法，再测试返回值。</li>
</ul>
</li>
<li><p><code>Number()</code> 函数</p>
<ul>
<li>如果是对象，则<strong>调用对象的 <code>valueOf()</code> 方法，然后依照前面的规则转换返回的值。如果转换的结果是 NaN ，则调用对象的 <code>toString()</code> 方法，然后再次依照前面的规则转换返回的字符串值。</strong><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> num1 = <span class="built_in">Number</span>(<span class="string">"Hello world!"</span>); <span class="comment">//NaN</span></div><div class="line"><span class="keyword">var</span> num2 = <span class="built_in">Number</span>(<span class="string">""</span>); <span class="comment">//0</span></div><div class="line"><span class="keyword">var</span> num3 = <span class="built_in">Number</span>(<span class="string">"000011"</span>); <span class="comment">//11</span></div><div class="line"><span class="keyword">var</span> num4 = <span class="built_in">Number</span>(<span class="literal">true</span>); <span class="comment">//1</span></div></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p><code>parseInt()</code></p>
<ul>
<li><p>由于 <code>Number()</code> 函数在转换字符串时比较复杂而且不够合理，因此在处理整数的时候更常用的是 parseInt() 函数。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> num1 = <span class="built_in">parseInt</span>(<span class="string">"1234blue"</span>); <span class="comment">// 1234</span></div><div class="line"><span class="keyword">var</span> num2 = <span class="built_in">parseInt</span>(<span class="string">""</span>); <span class="comment">// NaN</span></div><div class="line"><span class="keyword">var</span> num3 = <span class="built_in">parseInt</span>(<span class="string">"0xA"</span>); <span class="comment">// 10(十六进制数)</span></div><div class="line"><span class="keyword">var</span> num4 = <span class="built_in">parseInt</span>(<span class="number">22.5</span>); <span class="comment">// 22</span></div><div class="line"><span class="keyword">var</span> num5 = <span class="built_in">parseInt</span>(<span class="string">"070"</span>); <span class="comment">// 56(八进制数)</span></div><div class="line"><span class="keyword">var</span> num6 = <span class="built_in">parseInt</span>(<span class="string">"70"</span>); <span class="comment">// 70(十进制数)</span></div><div class="line"><span class="keyword">var</span> num7 = <span class="built_in">parseInt</span>(<span class="string">"0xf"</span>); <span class="comment">// 15(十六进制数)</span></div></pre></td></tr></table></figure>
</li>
<li><p>版本的分歧。在 ECMAScript 3 JavaScript 引擎中， “070” 被当成八进制字面量，因此转换后的值是十进制的 56。而在 ECMAScript 5 JavaScript 引擎中， <code>parseInt()</code> 已经不具有解析八进制值的能力，因此前导的零会被认为无效，从而将这个值当成 “70” ，结果就得到十进制的 70。在 ECMAScript 5 中，即使是在非严格模式下也会如此。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//ECMAScript 3 认为是 56(八进制)， ECMAScript 5 认为是 70(十进制)</span></div><div class="line"><span class="keyword">var</span> num = <span class="built_in">parseInt</span>(<span class="string">"070"</span>);</div></pre></td></tr></table></figure>
<p>所以要使用第二个参数指定进制基数。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> num1 = <span class="built_in">parseInt</span>(<span class="string">"AF"</span>, <span class="number">16</span>); <span class="comment">//175</span></div><div class="line"><span class="keyword">var</span> num2 = <span class="built_in">parseInt</span>(<span class="string">"AF"</span>); <span class="comment">//NaN</span></div></pre></td></tr></table></figure>
</li>
<li><p>建议无论在什么情况下都明确指定基数。</p>
</li>
</ul>
</li>
<li><code>parseFloat()</code><ul>
<li>字符串中的第一个小数点是有效的，而第二个小数点就是无效的了，因此它后面的字符串将被忽略。</li>
<li><code>parseFloat()</code> 与 parseInt() 的第二个区别在于它始终都会忽略前导的零。十六进制格式的字符串则始终会被转换成 0 。</li>
<li><code>parseFloat()</code> 只解析十进制值。如果字符串包含的是一个可解析为整数的数(没有小数点，或者小数点后都是零)， <code>parseFloat()</code> 会返回整数。<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> num1 = <span class="built_in">parseFloat</span>(<span class="string">"1234blue"</span>); <span class="comment">//1234 (整数)</span></div><div class="line"><span class="keyword">var</span> num2 = <span class="built_in">parseFloat</span>(<span class="string">"0xA"</span>); <span class="comment">//0</span></div><div class="line"><span class="keyword">var</span> num3 = <span class="built_in">parseFloat</span>(<span class="string">"22.5"</span>); <span class="comment">//22.5</span></div><div class="line"><span class="keyword">var</span> num4 = <span class="built_in">parseFloat</span>(<span class="string">"22.34.5"</span>); <span class="comment">//22.34</span></div><div class="line"><span class="keyword">var</span> num5 = <span class="built_in">parseFloat</span>(<span class="string">"0908.5"</span>); <span class="comment">//908.5</span></div><div class="line"><span class="keyword">var</span> num6 = <span class="built_in">parseFloat</span>(<span class="string">"3.125e7"</span>); <span class="comment">//31250000</span></div></pre></td></tr></table></figure>
</li>
</ul>
</li>
</ol>
<h3 id="parseInt和0-1-0-2的陷阱-所以要用parseFloat"><a href="#parseInt和0-1-0-2的陷阱-所以要用parseFloat" class="headerlink" title="parseInt和0.1+0.2的陷阱(所以要用parseFloat)"></a><code>parseInt</code>和<code>0.1+0.2</code>的陷阱(所以要用<code>parseFloat</code>)</h3><p><code>parse(0.0000001)==1</code>，而<code>parseInt(0.01) == 0</code></p>
<ul>
<li><strong>原因</strong>:<ol>
<li><code>parseInt</code> 会先调用 <code>toString</code> 方法。</li>
<li>对于小于 <code>1e-6</code> 的数值来说，<code>toString</code> 时会自动转换为科学计数法。</li>
<li>0.0000001会被转换成<code>&quot;1e-7&quot;</code></li>
<li>于是<code>parseInt(0.0000001)</code>就会变成<code>parseInt(&quot;1e-7&quot;)</code></li>
<li>因为<code>parseInt</code>不认识字符串形式的科学计数法，所以直接匹配字符串数字，<code>&quot;1e-7&quot;</code>就匹配到第一个数字1。</li>
</ol>
</li>
<li><strong>另一示例</strong>:  <figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">parseInt</span>(<span class="number">1</span>/<span class="number">1000001</span>) <span class="comment">//即 parseInt("9.99999000001e-7")</span></div><div class="line"><span class="number">9</span></div></pre></td></tr></table></figure>
</li>
</ul>
<p>浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数。<br>例如，0.1 加 0.2的结果不是 0.3，而是 0.30000000000000004。<br>这是使用基于 IEEE754 数值的浮点计算的通病， ECMAScript 并非独此一家。<br>但是别的语言一般有内置的标准库来解决这个问题，比如 BigDecimal 。<br>因此，永远不要测试某个特定的浮点数值。<br>解决方法1：使用 JavaScript 内置的函数 toPrecision 或 toFixed 来保留一定的精度。<br>解决方法2：<code>Math.round((0.1+0.2)*100)/100;//0.3</code><br>解决方法3：使用 BigDecimal 。其他语言有标准类库， js 没有内置的 BigDecimal 的库，要找一些第三方的来完成。</p>
<h2 id="String-类型"><a href="#String-类型" class="headerlink" title="String 类型"></a>String 类型</h2><ol>
<li>拼接变量：首先创建一个能容纳 10 个字符的新字符串，然后在这个字符串中填充 “Java” 和 “Script” ，最后一步是销毁原来的字符串 “Java” 和字符串 “Script” ，因为这两个字符串已经没用了。这也是在某些旧版本的浏览器(例如版本低于 1.0 的 Firefox 、 IE6 等)中拼接字符串时速度很慢的原因所在。</li>
<li>数值、布尔值、对象和字符串值(没错，每个字符串也都有一个 <code>toString()</code> 方法，该方法返回字符串的一个副本)都有 <code>toString()</code> 方法。但 null` 和 undefined 值没有这个方法。</li>
<li><code>toString()</code> 可以输出以二进制、八进制、十六进制乃至其他任意有效进制格式表示的字符串值。 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> num = <span class="number">10</span>;</div><div class="line">alert(num.toString()); <span class="comment">// "10"</span></div><div class="line">alert(num.toString(<span class="number">2</span>)); <span class="comment">// "1010"</span></div><div class="line">alert(num.toString(<span class="number">8</span>)); <span class="comment">// "12"</span></div><div class="line">alert(num.toString(<span class="number">10</span>)); <span class="comment">// "10"</span></div><div class="line">alert(num.toString(<span class="number">16</span>)); <span class="comment">// "a"</span></div></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="Object-类型"><a href="#Object-类型" class="headerlink" title="Object 类型"></a>Object 类型</h2><ol>
<li><p>ECMAScript 中的对象其实就是一组数据和功能的集合。</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> o = <span class="keyword">new</span> <span class="built_in">Object</span>();</div><div class="line"><span class="keyword">var</span> o = <span class="keyword">new</span> <span class="built_in">Object</span>; <span class="comment">// 有效，但不推荐省略圆括号</span></div></pre></td></tr></table></figure>
</li>
<li><p>在 ECMAScript 中，(就像 Java 中的 java.lang.Object 对象一样) Object 类型是所有它的实例的基础。换句话说， Object 类型所具有的任何属性和方法也同样存在于更具体的对象中。所有对象都具有这些基本的属性和方法。</p>
<ul>
<li><strong>constructor</strong> ：保存着用于创建当前对象的函数。对于前面的例子而言，构造函数(constructor)就是 Object() 。</li>
<li><strong>hasOwnProperty(propertyName)</strong> ：用于检查给定的属性在当前对象实例中(而不是在实例的原型中)是否存在。其中，作为参数的属性名( propertyName )必须以字符串形式指定(例如： o.hasOwnProperty(“name”) )。</li>
<li><strong>isPrototypeOf(object)</strong> ：用于检查传入的对象是否是传入对象的原型。</li>
<li><strong>propertyIsEnumerable(propertyName)</strong> ：用于检查给定的属性是否能够使用 for-in 语句来枚举。与 <code>hasOwnProperty()</code> 方法一样，作为参数的属性名必须以字符串形式指定。</li>
<li><strong>toLocaleString()</strong> ：返回对象的字符串表示，该字符串与执行环境的地区对应。</li>
<li><strong>toString()</strong> ：返回对象的字符串表示。</li>
<li><strong>valueOf()</strong> ：返回对象的字符串、数值或布尔值表示。通常与 toString() 方法的返回值相同。</li>
</ul>
</li>
<li>ECMA-262 中对象的行为不一定适用于 JavaScript 中的其他对象。 BOM 和 DOM 中的对象，都属于宿主对象， ECMA-262 不负责定义宿主对象，因此宿主对象可能会也可能不会继承 Object 。</li>
</ol>

      
    </div>

    <div>
      
        

      
    </div>

    <div>
      
        

      
    </div>


    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/Web/" rel="tag"># Web</a>
          
            <a href="/tags/JavaScript/" rel="tag"># JavaScript</a>
          
        </div>
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2016/09/10/javascript-note-02/" rel="next" title="《 JavaScript 高级程序设计》备忘-第二章">
                <i class="fa fa-chevron-left"></i> 《 JavaScript 高级程序设计》备忘-第二章
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2016/09/17/javascript-note-03-2/" rel="prev" title="《 JavaScript 高级程序设计》备忘-第三章-2">
                《 JavaScript 高级程序设计》备忘-第三章-2 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          
  <div class="comments" id="comments">
    
  </div>


        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="/uploads/avatar.jpg"
               alt="Huang SJ" />
          <p class="site-author-name" itemprop="name">Huang SJ</p>
          <p class="site-description motion-element" itemprop="description"></p>
        </div>
        <nav class="site-state motion-element">
          <div class="site-state-item site-state-posts">
            <a href="/archives">
              <span class="site-state-item-count">75</span>
              <span class="site-state-item-name">日志</span>
            </a>
          </div>

          
            <div class="site-state-item site-state-categories">
              <a href="/categories">
                <span class="site-state-item-count">4</span>
                <span class="site-state-item-name">分类</span>
              </a>
            </div>
          

          
            <div class="site-state-item site-state-tags">
              <a href="/tags">
                <span class="site-state-item-count">9</span>
                <span class="site-state-item-name">标签</span>
              </a>
            </div>
          

        </nav>

        

        <div class="links-of-author motion-element">
          
            
              <span class="links-of-author-item">
                <a href="https://github.com/hsj1992" target="_blank" title="GitHub">
                  
                    <i class="fa fa-fw fa-github"></i>
                  
                  GitHub
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://twitter.com/hsj9527" target="_blank" title="Twitter">
                  
                    <i class="fa fa-fw fa-twitter"></i>
                  
                  Twitter
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="http://weibo.com/u/1694147905" target="_blank" title="Weibo">
                  
                    <i class="fa fa-fw fa-weibo"></i>
                  
                  Weibo
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://www.freecodecamp.cn/hsj1992" target="_blank" title="FreeCodeCamp">
                  
                    <i class="fa fa-fw fa-fire"></i>
                  
                  FreeCodeCamp
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="http://codepen.io/hsj1992/" target="_blank" title="codepen">
                  
                    <i class="fa fa-fw fa-codepen"></i>
                  
                  codepen
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="http://hsj1992.oschina.io/" target="_blank" title="码云镜像">
                  
                    <i class="fa fa-fw fa-code"></i>
                  
                  码云镜像
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://hsj1992.coding.me/" target="_blank" title="coding镜像">
                  
                    <i class="fa fa-fw fa-code"></i>
                  
                  coding镜像
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://hsj1992.github.io/" target="_blank" title="github镜像">
                  
                    <i class="fa fa-fw fa-code"></i>
                  
                  github镜像
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://codingme-6dd8a.firebaseapp.com" target="_blank" title="Firebase镜像">
                  
                    <i class="fa fa-fw fa-google"></i>
                  
                  Firebase镜像
                </a>
              </span>
            
          
        </div>

        
        

        
        

        


      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#ECMAScript-的标识符"><span class="nav-number">1.</span> <span class="nav-text">ECMAScript 的标识符</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#注释"><span class="nav-number">2.</span> <span class="nav-text">注释</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#ECMAScript-的严格模式-strict-mode"><span class="nav-number">3.</span> <span class="nav-text">ECMAScript 的严格模式 (strict mode)</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#ECMAScript-的语句"><span class="nav-number">4.</span> <span class="nav-text">ECMAScript 的语句</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#ECMAScript-的关键字和保留字"><span class="nav-number">5.</span> <span class="nav-text">ECMAScript 的关键字和保留字</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#关键字"><span class="nav-number">5.1.</span> <span class="nav-text">关键字</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#保留字"><span class="nav-number">5.2.</span> <span class="nav-text">保留字</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#ECMAScript-的变量"><span class="nav-number">6.</span> <span class="nav-text">ECMAScript 的变量</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#ECMAScript-的数据类型"><span class="nav-number">7.</span> <span class="nav-text">ECMAScript 的数据类型</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#typeof-操作符"><span class="nav-number">7.1.</span> <span class="nav-text">typeof 操作符</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Undefined-类型"><span class="nav-number">7.2.</span> <span class="nav-text">Undefined 类型</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Null-类型"><span class="nav-number">7.3.</span> <span class="nav-text">Null 类型</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Boolean-类型"><span class="nav-number">7.4.</span> <span class="nav-text">Boolean 类型</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Number-类型"><span class="nav-number">7.5.</span> <span class="nav-text">Number 类型</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#parseInt和0-1-0-2的陷阱-所以要用parseFloat"><span class="nav-number">7.5.1.</span> <span class="nav-text">parseInt和0.1+0.2的陷阱(所以要用parseFloat)</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#String-类型"><span class="nav-number">7.6.</span> <span class="nav-text">String 类型</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Object-类型"><span class="nav-number">7.7.</span> <span class="nav-text">Object 类型</span></a></li></ol></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy;  2015 - 
  <span itemprop="copyrightYear">2016</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Huang SJ</span>
</div>


<div class="powered-by">
  由 <a class="theme-link" href="https://hexo.io">Hexo</a> 强力驱动
</div>

<div class="theme-info">
  主题 -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT.Pisces
  </a>
</div>


        

        
      </div>
    </footer>

    <div class="back-to-top">
      <i class="fa fa-arrow-up"></i>
    </div>
  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  



  
  <script type="text/javascript" src="//cdn.staticfile.org/jquery/2.1.3/jquery.min.js"></script>

  
  <script type="text/javascript" src="//cdn.staticfile.org/fastclick/1.0.6/fastclick.min.js"></script>

  
  <script type="text/javascript" src="//cdn.staticfile.org/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>

  
  <script type="text/javascript" src="//cdn.staticfile.org/velocity/1.2.1/velocity.min.js"></script>

  
  <script type="text/javascript" src="//cdn.staticfile.org/velocity/1.2.1/velocity.ui.min.js"></script>

  
  <script type="text/javascript" src="//cdn.staticfile.org/fancybox/2.1.5/jquery.fancybox.pack.js"></script>


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.0"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.0"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.0"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.0"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.0"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.0"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.0"></script>



  



  




	




  
  
  <script type="text/javascript">
    // Popup Window;
    var isfetched = false;
    // Search DB path;
    var search_path = "search.xml";
    if (search_path.length == 0) {
      search_path = "search.xml";
    }
    var path = "/" + search_path;
    // monitor main search box;

    function proceedsearch() {
      $("body").append('<div class="popoverlay">').css('overflow', 'hidden');
      $('.popup').toggle();
    }
    // search function;
    var searchFunc = function(path, search_id, content_id) {
      'use strict';
      $.ajax({
        url: path,
        dataType: "xml",
        async: true,
        success: function( xmlResponse ) {
          // get the contents from search data
          isfetched = true;
          $('.popup').detach().appendTo('.header-inner');
          var datas = $( "entry", xmlResponse ).map(function() {
            return {
              title: $( "title", this ).text(),
              content: $("content",this).text(),
              url: $( "url" , this).text()
            };
          }).get();
          var $input = document.getElementById(search_id);
          var $resultContent = document.getElementById(content_id);
          $input.addEventListener('input', function(){
            var matchcounts = 0;
            var str='<ul class=\"search-result-list\">';
            var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
            $resultContent.innerHTML = "";
            if (this.value.trim().length > 1) {
              // perform local searching
              datas.forEach(function(data) {
                var isMatch = false;
                var content_index = [];
                var data_title = data.title.trim().toLowerCase();
                var data_content = data.content.trim().replace(/<[^>]+>/g,"").toLowerCase();
                var data_url = decodeURIComponent(data.url);
                var index_title = -1;
                var index_content = -1;
                var first_occur = -1;
                // only match artiles with not empty titles and contents
                if(data_title != '') {
                  keywords.forEach(function(keyword, i) {
                    index_title = data_title.indexOf(keyword);
                    index_content = data_content.indexOf(keyword);
                    if( index_title >= 0 || index_content >= 0 ){
                      isMatch = true;
                      if (i == 0) {
                        first_occur = index_content;
                      }
                    }

                  });
                }
                // show search results
                if (isMatch) {
                  matchcounts += 1;
                  str += "<li><a href='"+ data_url +"' class='search-result-title'>"+ data_title +"</a>";
                  var content = data.content.trim().replace(/<[^>]+>/g,"");
                  if (first_occur >= 0) {
                    // cut out 100 characters
                    var start = first_occur - 20;
                    var end = first_occur + 80;
                    if(start < 0){
                      start = 0;
                    }
                    if(start == 0){
                      end = 50;
                    }
                    if(end > content.length){
                      end = content.length;
                    }
                    var match_content = content.substring(start, end);
                    // highlight all keywords
                    keywords.forEach(function(keyword){
                      var regS = new RegExp(keyword, "gi");
                      match_content = match_content.replace(regS, "<b class=\"search-keyword\">"+keyword+"</b>");
                    });

                    str += "<p class=\"search-result\">" + match_content +"...</p>"
                  }
                  str += "</li>";
                }
              })};
            str += "</ul>";
            if (matchcounts == 0) { str = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>' }
            if (keywords == "") { str = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>' }
            $resultContent.innerHTML = str;
          });
          proceedsearch();
        }
      });}

    // handle and trigger popup window;
    $('.popup-trigger').click(function(e) {
      e.stopPropagation();
      if (isfetched == false) {
        searchFunc(path, 'local-search-input', 'local-search-result');
      } else {
        proceedsearch();
      };
    });

    $('.popup-btn-close').click(function(e){
      $('.popup').hide();
      $(".popoverlay").remove();
      $('body').css('overflow', '');
    });
    $('.popup').click(function(e){
      e.stopPropagation();
    });
  </script>


  

  

  

  


</body>
</html>
